import React,{Component} from 'react';
import{
Button,
ScrollView,
StyleSheet,
Image,
View,
Text,
FlatList,
TouchableHighlight,
Dimensions,
Alert,
ActivityIndicator
} from 'react-native';

import {SafeAreaView} from 'react-navigation';
import Datajson from '../../../datasource/data.json'

//引入图标
import Icon from 'react-native-vector-icons/FontAwesome';
//import  FontAwesome from 'react-native-vector-icons/FontAwesome';
//获取宽高
var {height, width} = Dimensions.get('window')


//设置工具列表页面
//class AllContactsScreen extends Component
class MyListItem extends Component{
  _onPress = ()=>{
    this.props.onPressItem(this.props.id)
  }

  render(){
    return (
      <TouchableHighlight onPress={this._onPress.bind(this)}>
        <View style={styles.item}>
          <Text style={styles.title}>{this.props.title}</Text>
         <Image
          style={styles.thumb}
          source={{uri:this.props.cover}}
          >
          </Image>
          <Icon
            name={'play-circle'}
            size={28}
            style={styles.play}  
          />
          <View style={styles.itemFooter}>
            <View style={styles.handleBox}>
              <Icon.Button
                name={'heart-o'}
                size={18}
                color={'#dedede'}
                backgroundColor={'transparent'}
              ></Icon.Button>
              <Text style={styles.handleText}>喜欢</Text>
            </View>
            <View style={styles.handleBox}>
              <Icon.Button
                name={'comments'}
                size={18}
                color={'#dedede'}
                backgroundColor={'transparent'}
              ></Icon.Button>
              <Text style={styles.handleText}>评论</Text>
            </View>
          </View>  
        </View>
      </TouchableHighlight>
      
    )
  }
}
class TooScreen extends Component{
  constructor(props){
    super(props);
    this.state = {
      dataInfo : Datajson.subjects,
      selected: (new Map(): Map<string, boolean>)
    }
  }
  componentDidMount() {

  }
  _onPressItem = (id:string)=>(
    this.setState((state)=>{
      const selected = new Map(state.selected)
      selected.set(id,!selected.get(id))
      return {selected}
    })
  )
  _renderItem = ({item})=>(
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem.bind(this)}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  )
  //上拉加载
  _endReach (){
    const {
      videoList,
      isLoadingTail,
      fetchCreations
    } = this.props
    if(this._hasMore()&&!isLoadingTail){
      fetchCreactions()
    }
  }
  //数据是否加载完成
  _hasMore (){
    const {
      videoList,
      videoTotal
    } = this.props
    //return true
   return videoList.length < videoList 
  }
  //增加底部条数
  _listFooter(){
  
    if(!this._hasMore() && this.props.videoTotal!==0){
      return (
        <View style = {styles.loadingMore}>
          <Text style={styles.loadingText}>没有更多</Text>
        </View>
      )
    }else{
      return (
        <ActivityIndicator
          //animating={this.state.animating}
          style={styles.loadingMore}
          size="large"
        />
      )
    } 
  }
  _onFresh(){
    alert(1)

  }
  _keyExtractor = (item,index)=>item.id
  render(){
    return(
      <ScrollView>
      <SafeAreaView forceInset={{ horizontal: 'always' }}>
        <FlatList
          data={this.state.dataInfo}
          extraData = {this.state}
          keyExtractor={this._keyExtractor.bind(this)}
          renderItem = {this._renderItem.bind(this)}
          onEndReached = {this._endReach.bind(this)}
          onEndReachedThreshold = {20}
          ListFooterComponent = {this._listFooter.bind(this)}
          showsVerticalScrollIndicator = {false}

          refreshing = {this.props.isRefreshing}
          onRefresh = {this._onFresh.bind(this)}
          tintColor = '#ff6600'
          title = '拼命加载中！'
  
          
          
        />
      </SafeAreaView>
    </ScrollView>
    );
    
  }
}
const styles = StyleSheet.create({
  item:{
    width:width,
    marginBottom:10,
    backgroundColor:'#fff'
  },
  thumb:{
    width:width,
    height:width*0.5,
    resizeMode:'cover'
  },
  title:{
    padding:10,
    fontSize:18,
    color:'#333',
  },
  itemFooter:{
    flexDirection:'row',
    justifyContent:'center',
    backgroundColor:'#eee'
  },
  handleBox:{
    padding:10,
    flexDirection:'row',
    width:width/2-0.5,
    justifyContent:'center',
    backgroundColor:'#fff'
  },
  play:{
    position:'absolute',
    bottom:14,
    width:46,
    height:46,
    paddingTop:9,
    paddingLeft:18,
    backgroundColor:'transparent',
    borderColor:'#fff',
    borderRadius:23,
    
  },
  handleText:{
    marginTop:8,
    //alignItems:'center'
  }


})
export default TooScreen;